<div>
    <p>v-html的用法</p>
    <h1 v-html="title"></h1> <!-- 遇到标签会自动解析标签追加进当前被绑定的节点 -->
    <h1>{{title}}</h1> <!-- 不解析标签，全部输出到当前绑定节点中 -->

    <p>v-text</p>
    <h1 v-text="title"></h1><!-- 不解析标签，全部输出到当前绑定节点中 -->

    <p>v-bind</p>
    <!-- 标签属性的值为一个变量的时候需要通过v-bind绑定 -->
    <h1 v-bind:class="color">{{title}}</h1>
    <h1 :class="color">{{title}}</h1>

    <p>v-on</p>
    <!-- 绑定click change 等事件使用 -->
    <button v-on:click="changeColor">改变颜色</button>
    <button @click="changeColor">改变颜色</button>

    <p>v-model</p>
    <!-- 双向数据绑定 -->
    <input type="text" v-model="user"/>
    <button @click="submit">提交</button>

    <p>v-for</p>
    <!-- 循环页面数据使用 -->
    <p>一层数据循环案例</p>
    <div v-for="item in list">
        <p>{{item.title}}</p>
        <p>{{item.price}}</p>
    </div>

    <p>二层数据循环案例(简单选项卡实现)</p>
    <div class="out">
        <div class="nav">
            <div v-for="(i,index) in doublelist">
                <h3 @click="changData(index)">{{i.type}}</h3>
            </div>
        </div>
        <div class="content">
            <div v-for="j in rigthList.data">
                <p>菜品名称：{{j.title}}</p>
                <p>价格：{{j.price}}</p>
                <p>数量：{{j.count}}</p>
            </div>
        </div>
    </div>

    <p>v-show</p>
    <button @click="boxIsShow=true">点击出现弹层</button>
    <div class="black" v-show="boxIsShow">
        <div class="ctx">
            <p>我是一个弹层</p>
            <span class="orange" @click="boxIsShow=false">关闭</span>
        </div>
    </div>

    <p>v-if</p>
    <div v-if="num>1">你今天真好看</div>
    <div v-else>你今天真不好看</div>
</div>